<template>
  <view class="container">
    <view class="selectComponents">
      <u-subsection :list="list" :current="current" activeColor="#05C160" @change="selectStatus" fontSize="14">
      </u-subsection>
    </view>

    <!-- 分列表展示内容 -->
    <u-transition show="true" mode="fade-down" duration="500">
      <view class="content1" v-show="content[0]">
        <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
      </view>
    </u-transition>
    
    <u-transition show="true" mode="fade-down" duration="500">
      <view class="content2" v-show="content[1]">
        <u-empty mode="address" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
      </view>
    </u-transition>
    
    <u-transition show="true" mode="fade-down" duration="500">
      <view class="content3" v-show="content[2]">
        <u-empty mode="history" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
      </view>
    </u-transition>
    
    <u-transition show="true" mode="fade-down" duration="500">
      <view class="content2" v-show="content[3]">
        <u-empty mode="news" icon="http://cdn.uviewui.com/uview/empty/car.png">
        </u-empty>
      </view>
    </u-transition>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: ['未付款', '已付款', '待收货', '待评价'],
        current: 0,
        content: [true, false, false, false],
        status: 'loading'
      };
    },
    methods: {
      selectStatus(index) {
        this.current = index;
        for(let i = 0; i<this.content.length; i++){
          this.content[i] = false;
        }
        this.content[index] = true;
      }
    }
  }
</script>

<style lang="scss">
  .container {

    .selectComponents {
      width: 700rpx;
      margin: 0 auto;
      margin-top: 10rpx;
    }
  }
</style>
